<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-sm" href="<?php echo \yii\helpers\Url::to(['create']) ?>" ><i class="layui-icon layui-icon-add-1"></i>添加用户</a>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            {{# if(d.id!=<?php echo Yii::$app->params['super_user_id']; ?>){ }}
            <a href="{{d.edit_url}}" class="layui-btn layui-btn-xs" ><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a href="{{d.reset_password_url}}" class="layui-btn layui-btn-xs" ><i class="layui-icon layui-icon-password"></i>重置密码</a>
            <a href="{{d.role_url}}" class="layui-btn layui-btn-xs layui-btn-normal" ><i class="layui-icon layui-icon-user"></i>分配角色</a>
            <!--<a href="{{d.permission_url}}" class="layui-btn layui-btn-xs layui-btn-normal" ><i class="layui-icon layui-icon-survey"></i>分配权限</a>-->
            <a lay-event="destroy" class="layui-btn layui-btn-xs layui-btn-danger" ><i class="layui-icon layui-icon-delete"></i>删除</a>
            {{# } }}
        </script>
        <script type="text/html" id="roles">
            {{# layui.each(d.roles,function(index,item){  }}
            <span class="layui-badge layui-bg-cyan">{{ item.description }}</span>
            {{# }) }}
        </script>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['index']);
$assign_exten_url = yii\helpers\Url::to(['exten']);
$js = <<<JS
    layui.use(['form','element','table', 'layer'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 'full-200'
            ,url: '{$url}' 
            ,page: true 
            ,toolbar: false 
            ,cols: [[ 
                {type: 'checkbox'}
                ,{field: 'id', title: 'ID',width:80}
                ,{field: 'username', title: '用户名', width: 120}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'roles', title: '角色',toolbar:'#roles'}
                ,{field: 'exten', title: '分机号',edit:true}
                ,{title: '操作',toolbar:'#options'}
            ]]
        });
        
        //监听工具条
        table.on('tool(dataTable)', function(obj){ 
            var data = obj.data; 
            var layEvent = obj.event;
            if(layEvent === 'destroy'){ 
                console.log(data)
                layer.confirm('确认删除吗？', function(index){
                    $.post(data.destroy_url,{},function(res) {
                        layer.msg(res.msg,{},function() {
                            if (res.code==0){
                                obj.del(); 
                                layer.close(index);
                            }   
                        })  
                    })
                });
            } 
        });
        
        table.on('edit(dataTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            //修改前的值
            var old_val = obj.data.exten;
            var load = layer.load();
            $.post('{$assign_exten_url}',{id:obj.data.id,exten:obj.value},function(res) {
                layer.close(load);
                layer.msg(res.msg);
            })  
        });
        
        
    });
JS;
$this->registerJs($js);
